<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>短信项目视图</title>
    <link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <script src="../../layui/layui.js"></script>
    <script type="text/html" id="prostatus">
        {{#  if(d.state === '3'){ }}
        <span style="background-color: #EB9F22;color: #fff;display: block;TEXT-ALIGN:CENTER;WIDTH:100%;">{{ d.stateName }}</span>
        {{#  }else{}}
        {{#  } }}
        {{#  if(d.state === '0'){ }}
        <span style="background-color: #36BD16; color: #fff;TEXT-ALIGN:CENTER;WIDTH:100%;display: block;">{{ d.stateName }}</span>
        {{#  }else{}}
        {{#  } }}
        {{#  if(d.state === '2'){ }}
        <span style="background-color: #D14339; color: #fff;TEXT-ALIGN:CENTER;WIDTH:100%;display: block;">{{ d.stateName }}</span>
        {{#  }else{}}
        {{#  } }}
        {{#  if(d.state === '1'){ }}
        <span style="background-color: #797A7C; color: #fff;TEXT-ALIGN:CENTER;WIDTH:100%;display: block;">{{ d.stateName}}</span>
        {{#  }else{}}
        {{#  } }}
    </script>
    <script type="text/javascript">
        layui.use(['table', 'form', 'jquery','element'], function () {
            var form = layui.form;
            var table=layui.table;
            var $ = layui.$;
            var option = {
                elem: "#table",//表格id
                id: "modelReload", //id
                url: '/smsMgrView/find',
                method: 'post',
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                page: true,
                count: "count",
                limit: 10,
                limits: [10, 20, 30, 40, 50],
                layout: ['prev', 'page', 'next'],
                prev: "上一页",
                next: "下一页",
                cols: [[ //表头
                    {field: 'cityName', title: '地市'}
                    , {field: 'name', title: '短信项目名称'}
                    , {field: 'stateName', title: '项目状态', templet: '#prostatus'}
                    , {field: 'startTime', title: '开始时间'}
                    , {field: 'endTime', title: '结束时间'}
                ]]
            };
            table.render(option);

            $('#query').on('click', function () {
                table.reload('modelReload', {
                    method: 'post',
                    page: {
                        curr: 1
                    },
                    where: {
                        cityId: $("#cityId").val(),
                        state: $('#state').val()
                    }
                });
            });
            //导出
            $('#download').on('click', function () {
                var cityId = $("#cityId").val();
                var state = $('#state').val();
                url = '/smsMgrView/download?cityId='
                    + cityId
                    + "&state="
                    + state;
                location.href = url;
            });
        });
    </script>
</head>
<body>
<div class="layui-content-body">
    <div class="scroll-box">
        <div class="breadcrumb-box">
              <span class="layui-breadcrumb" lay-separator="|">
  <a href="">首页&nbsp;</a>
  <a href=""> &nbsp;报表管理 </a>
  <a href=""> &nbsp;短信项目视图 </a>
</span>
        </div>
        <div class="content-box">
            <div class="form-select-box">
                <div class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">省份</label>
                            <div class="layui-input-block">
                                <input type="text" name="province" lay-verify="required" value="江苏"
                                       autocomplete="off" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">地市</label>
                            <div class="layui-input-block">
                                <select  lay-filter="cityId" id="cityId">
                                    <option value="">请选择</option>
                                    <option value="11">苏州</option>
                                    <option value="12">淮安</option>
                                    <option value="13">宿迁</option>
                                    <option value="14">南京</option>
                                    <option value="15">连云港</option>
                                    <option value="16">徐州</option>
                                    <option value="17">常州</option>
                                    <option value="18">镇江</option>
                                    <option value="19">无锡</option>
                                    <option value="20">南通</option>
                                    <option value="21">泰州</option>
                                    <option value="22">盐城</option>
                                    <option value="23">扬州</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">项目状态</label>
                            <div class="layui-input-block">
                                <select name="interest" lay-filter="state" id="state">
                                    <option value="">全部</option>
                                    <option value="0">开启</option>
                                    <option value="1">暂停</option>
                                    <option value="2">关闭</option>
                                    <option value="3">配置中</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" id="query">查询</button>
                            <button class="layui-btn layui-btn-normal" id="download">导出</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-box">
                <table class="layui-table" id="table">
                </table>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>